<template>
  <div class="suggests">
    <Loading v-if="suggestloading"></Loading>
    <template v-else>
      <ul>
        <li
          v-for="(item, index) in suggests"
          :key="index"
          @click="$emit('gotosearch', item.name)"
        >
          <h3>
            {{ item.name }}
          </h3>
          <span
            v-if="item.tag"
            :style="{
              backgroundColor: item.tag.background_color,
              color: item.tag.text_color,
              borderColor: item.tag.border_color,
            }"
            >{{ item.tag.name }}</span
          >
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
export default {
  components: {
    Loading,
  },
  props: ["suggests", "suggestloading"],
};
</script>

<style lang="less" scoped>
.suggests {
  ul {
    li {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #f1f1f1;
      h3 {
        font-size: 15px;
      }
      span {
        display: block;
        padding: 3px 10px;
        font-size: 12px;
        border-radius: 50px;
        border: 1px solid transparent;
      }
    }
  }
}
</style>